<!--
 * @Descripttion: 文件说明
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-09-16 17:37:05
 * @LastEditors: GW
 * @LastEditTime: 2021-09-16 18:08:25
-->
<template>
    <div class="side">
        <ul>
            <!-- <li class="shangqiao">
          <a target="_blank" title="在线QQ"  href="http://wpa.qq.com/msgrd?v=3&uin=584418600&site=qq&menu=yes" rel="nofollow">
            <div><i class="fa fa-qq" style="font-size: 24px; color: #f4623a;"></i>立即分享</div>
          </a>
        </li> -->
            <li class="shangqiao">
                <a target="_blank" class="blank-qq" title="在线QQ" href="http://wpa.qq.com/msgrd?v=3&uin=584418600&site=qq&menu=yes" style="color:#333" rel="nofollow">
                    <dd class="bgs1"><a-icon type="qq" />在线QQ</dd>
                </a>
            </li>

            <li class="sideetel"><a-icon type="phone" />马上咨询
                <div class="telBox son">
                    <a class="d-block" href="tel:13918806563" style="color: #fff;">
                        <dd class="bgs1">电话：13918806563</dd>
                    </a>
                    <a class="d-block" href="tel:023-68888995" style="color: #fff;">
                        <dd class="bgs1">座机：023-68888995</dd>
                    </a>
                </div>
            </li>
            <li class="sideetel"><a-icon type="phone" />售后咨询
                <div class="telBox son">
                    <a class="d-block" href="tel:023-68888995" style="color: #fff;">
                        <dd class="bgs1">电话：023-68888995</dd>
                    </a>
                </div>
            </li>

            <li class="sideetel"><a-icon type="qrcode" />微信公众号
                <div class="telBox son">
                    <img src="~@/assets/wechart.jpg" style="width: 150px;height: 150px;" alt="">
                </div>
            </li>
            <li class="sideetel">
                <div><a-icon type="user" />QQ交流群</div>
                <div class="telBox son">
                    <a target="_blank" title="立即加群交流" href="https://shang.qq.com/wpa/qunwpa?idkey=7af3f92235c812071a14294704e4f2859a381655d1d0f88b1111800d9a462ecc" style="color: #fff;" rel="nofollow">
                        <dd class="bgs1">QQ交流群1</dd>
                    </a>
                    <a target="_blank" title="立即加群交流" href="https://shang.qq.com/wpa/qunwpa?idkey=05257c4a1c4489b8891845a9baa2700d825e79b7b8955b018c42ecc99d8ff27a" style="color: #fff;" rel="nofollow">
                        <dd class="bgs1">QQ交流群2</dd>
                    </a>
                </div>
            </li>

        </ul>
    </div>
</template>

<script>

export default {

}
</script>

<style scoped>
    @charset "utf-8";
    * {
        padding: 0;
        font-family: '微软雅黑';
    }

    ol,
    ul {
        list-style: none;
    }

    img {
        border: 0;
    }

    .side {
        position: fixed;
        width: 78px;
        right: 0;
        top: 50%;
        margin-top: -200px;
        z-index: 100;
        border: 1px solid #e0e0e0;
        background: #cacaca;
        border-bottom: 0;
    }

    .side ul li {
        width: 78px;
        height: 78px;
        float: left;
        position: relative;
        border: 1px solid #e0e0e0;
        color: #333;
        font-size: 14px;
        line-height: 38px;
        text-align: center;
        transition: all 0.3s;
        cursor: pointer;
    }

    .side ul li i {
        font-size: 24px;
        color: #f4623a;
    }

    .side ul li:hover {
        background: #f67524;
        color: #fff;
    }

    .side ul li a:hover {
        color: #fff;
    }

    .side ul li i {
        color: #fff;
    }

    /* .side ul li:hover a{color:#fff} */

    .side ul li i {
        height: 25px;
        margin-bottom: 1px;
        display: block;
        overflow: hidden;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: auto 25px;
        margin-top: 14px;
        transition: all 0.3s;
    }

    .side ul li .sidebox {
        position: absolute;
        width: 78px;
        height: 78px;
        top: 0;
        right: 0;
        transition: all 0.3s;
        overflow: hidden;
    }

    .side ul li.sidetop {
        background: #f67524;
        color: #fff;
    }

    .side ul li.sidetop:hover {
        opacity: 0.8;
        filter: Alpha(opacity=80);
    }

    .side ul li.sideewm .ewBox.son {
        width: 238px;
        display: none;
        color: #363636;
        text-align: center;
        padding-top: 235px;
        position: absolute;
        left: -203px;
        top: 0;
        background-repeat: no-repeat;
        background-position: center center;
        border: 1px solid #e0e0e0;
    }

    .side ul li.sideetel .telBox.son {
        width: 200px;
        /* height: 237px; */
        display: none;
        color: #fff;
        text-align: left;
        position: absolute;
        left: -203px;
        top: 0px;
        text-align: center;
        /* background:#f67524 */
    }

    .side ul li.sideetel .telBox dd {
        display: block;
        height: 78px;
        line-height: 78px;
        overflow: hidden;
        /* padding-left: 82px; */
        /* line-height:24px; */
        font-size: 18px;
        margin-bottom: 0;
    }

    .side ul li.sideetel .telBox dd span {
        display: block;
        line-height: 28px;
        height: 28px;
        overflow: hidden;
        margin-top: 10px;
        font-size: 18px;
    }

    .side ul li.sideetel .telBox dd.bgs1 {
        background-color: #e96410;
    }

    .side ul li:hover .son {
        display: block !important;
        animation: fadein 1s;
    }

    @keyframes fadein {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    .shangqiao:hover .blank-qq {
        color: #fff !important;
    }
</style>